<template>
  <div class="user">
    <van-nav-bar left-text="返回" left-arrow @click-left="back">
      <template #title>
        <van-tabs v-model:active="activeTabsIndex" type="card">
          <van-tab title="我喜欢的"></van-tab>
          <van-tab title="最近播放"></van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>
    <div class="play-btn" @click="random">
      <i class="icon-play"></i>
      <span class="text">随机播放全部</span>
    </div>

    <van-popup
      :show="true"
      position="bottom"
      :style="{ height: VHeight }"
      :overlay="false"
      duration="0"
      style="padding: 10px 20px 20px;font-size: 14px;"
    >
      <!-- <HistoryList
        confirmTitle="是否取消收藏?"
        :songs="favoriteList"
        @select="selectSongBySongList"
        v-show="activeTabsIndex === 0"
      >
      </HistoryList> -->
      <div
        class="song_item"
        v-for="(item, index) in activeTabsIndex === 0
          ? favoriteList
          : playHistory"
        :key="item.id"
        @click="selectSong(index)"
      >
        <p>{{ item.name }}</p>
        <div class="singer">
          <span>{{ item.singer }}</span>
          <span class="item_album">{{ item.album }}</span>
        </div>
        <van-icon
          :name="activeTabsIndex === 0 ? 'like' : 'cross'"
          :size="activeTabsIndex === 0 ? '20px' : '14px'"
          color="#ffcd32"
          @click.stop="deleteItem(item)"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import HistoryList from '@/components/HistoryList'

import { ref, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Dialog } from 'vant'
export default {
  name: 'user',
  components: { HistoryList },
  setup() {
    const store = useStore()
    const router = useRouter()
    const activeTabsIndex = ref(0)
    const vanPopupShow = ref(false)
    const VHeight = ref('')
    store.dispatch('changeList')

    const windowHeight = computed(() => store.state.windowHeight)
    const favoriteList = computed(() => store.state.favoriteList) // 收藏
    const playHistory = computed(() => store.state.playHistory) // 历史

    VHeight.value = windowHeight.value - 100 + 'px'

    const back = () => {
      router.back()
    }

    const random = () => {
      store.dispatch(
        'randomPlay',
        activeTabsIndex.value === 0 ? favoriteList.value : playHistory.value
      )
    }

    const selectSong = index => {
      store.dispatch('selectPlay', {
        list:
          activeTabsIndex.value === 0 ? favoriteList.value : playHistory.value,
        index
      })
    }

    const deleteItem = item => {
      Dialog.confirm({
        title: activeTabsIndex.value === 0 ? '是否取消收藏?' : '是否删除该记录?'
      })
        .then(() => {
          // on confirm
          console.log(item.id)
          if (activeTabsIndex.value === 0) {
            store.dispatch('setFavoriteList', item)
          } else {
            store.dispatch('setPlayHistory', {
              song: item,
              type: 'del'
            })
          }
        })
        .catch(() => {
          // on cancel
        })
    }

    return {
      deleteItem,
      random,
      activeTabsIndex,
      favoriteList,
      playHistory,
      back,
      vanPopupShow,
      VHeight,
      selectSong
    }
  }
}
</script>
<style lang="scss" scoped>
.user {
  width: 100vw;
  height: 100vh;
  .play-btn {
    box-sizing: border-box;
    width: 135px;
    padding: 7px 0;
    margin: 10px auto;
    text-align: center;
    border: 1px solid $color-text-l;
    color: $color-text-l;
    border-radius: 100px;
    font-size: 0;
    .icon-play {
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
      font-size: $font-size-medium-x;
    }
    .text {
      display: inline-block;
      vertical-align: middle;
      font-size: $font-size-small;
    }
  }
  .van-popup {
    width: 100%;
    font-size: 14px;
    // overflow: hidden;
    padding: 10px 20px 20px;
    .song_item {
      height: 64px;
      width: 100%;
      padding: 5px 0;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        color: #fff;
      }
      .singer {
        margin-top: 10px;
        span {
          color: rgba(255, 255, 255, 0.3);
        }
        .item_album {
          display: inline-block;
          margin-left: 8px;
          max-width: 225px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .van-icon {
        position: absolute;
        padding: 20px 5px;
        right: 0;
        top: 5px;
        font-size: $font-size-medium;
        color: $color-text-d;
      }
    }
  }
}
</style>
